<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Calendar Menu Button</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

    /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
    */
    
    div.yuimenu .bd {
    
        zoom: normal;
    
    }

    /*
        Restore default padding of 10px for the calendar containtainer 
        that is overridden by the ".example-container .bd .bd" rule 
        in yui.css.
    */

    #calendarcontainer {

        padding:10px;

    }

    #calendarmenu {
    
        position: absolute;
    
    }

    #calendarpicker button {

        background: url(../button/assets/calendar_icon.gif) center center no-repeat;
        text-align: left;
        text-indent: -10em;
        overflow: hidden;
        *margin-left: 10em; /* For IE */
        *padding: 0 3em;    /* For IE */
        white-space: nowrap;

    }

    #month-field,
    #day-field {
    
        width: 2em;
    
    }
    
    #year-field {
    
        width: 3em;
    
    }

	#datefields {
	
		border: solid 1px #666;
		padding: .5em;
	
	}
	
	#calendarpicker  {
	
		vertical-align: baseline;
		
	}

</style>
<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Calendar Menu Button</h1>

<div class="exampleIntro">
	<p>
This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<script type="text/javascript">

    YAHOO.util.Event.onDOMReady(function () {

        function onButtonClick() {

            /*
                 Create an empty body element for the Overlay instance in order 
                 to reserve space to render the Calendar instance into.
            */

            oCalendarMenu.setBody("&#32;");

            oCalendarMenu.body.id = "calendarcontainer";


            // Render the Overlay instance into the Button's parent element

            oCalendarMenu.render(this.get("container"));
            

            // Align the Overlay to the Button instance

            oCalendarMenu.align();
            
            
            /*
                 Create a Calendar instance and render it into the body 
                 element of the Overlay.
            */

            var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);

            oCalendar.render();


            /* 
                Subscribe to the Calendar instance's "changePage" event to 
                keep the Overlay visible when either the previous or next page
                controls are clicked.
            */

            oCalendar.changePageEvent.subscribe(function () {
                
                window.setTimeout(function () {

                    oCalendarMenu.show();
                
                }, 0);
            
            });


            /*
                Subscribe to the Calendar instance's "select" event to 
                update the month, day, year form fields when the user
                selects a date.
            */

            oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {

                var aDate;

                if (p_aArgs) {
                        
                    aDate = p_aArgs[0][0];
                        
                    YAHOO.util.Dom.get("month-field").value = aDate[1];
                    YAHOO.util.Dom.get("day-field").value = aDate[2];
                    YAHOO.util.Dom.get("year-field").value = aDate[0];

                }
                
                oCalendarMenu.hide();
            
            });
            

            /*
                 Unsubscribe from the "click" event so that this code is 
                 only executed once
            */

            this.unsubscribe("click", onButtonClick);
        
        }


        // Create an Overlay instance to house the Calendar instance

        var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");


        // Create a Button instance of type "menu"

        var oButton = new YAHOO.widget.Button({ 
                                            type: "menu", 
                                            id: "calendarpicker", 
                                            label: "Choose A Date", 
                                            menu: oCalendarMenu, 
                                            container: "datefields" });
        

        /*
            Add a "click" event listener that will render the Overlay, and 
            instantiate the Calendar the first time the Button instance is 
            clicked.
        */

        oButton.on("click", onButtonClick);
    
    });

</script>

<div>

    <form id="button-example-form" name="button-example-form" method="post" action="#">
    
        <fieldset id="datefields">
    
            <legend>Date</legend>
    
            <label for="month-field">Month: </label> <input id="month-field" type="text" name="month">
            <label for="day-field">Day:</label> <input id="day-field" type="text" name="day">
            <label for="year-field">Year: </label> <input id="year-field" type="text" name="year">
    
        </fieldset>
    
    </form>

</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>